<template>
    <a-drawer
        v-model:open="open"
        title="文档详情"
        placement="right"
        :width="1156"
        :getContainer="getContainer"
    >
        <div class="hele-detail">
            <div class="top-box">
                <img
                    class="back"
                    src="@/assets/Lw/arrow2.png"
                    alt=""
                    @click="open = false"
                />
                <div class="right">
                    <div class="title">视频制作基本流程</div>
                </div>
            </div>
            <div class="content-box" v-html="helpArticle.content"></div>

            <a-spin
                class="page-loading"
                :class="{ active: pageLoading }"
                size="large"
            />
        </div>

        <template #footer>
            <div class="btns">
                <a-button type="primary" ghost @click="open = false">
                    返回
                </a-button>
            </div>
        </template>
    </a-drawer>
</template>

<script setup lang="ts">
    import { HelpArticle } from "@/type/helpArticleManage";
    import helpArticleManageService from "@/service/helpArticleManage.service";
    const open = ref(false);
    let id: any = undefined;
    const toggleOpen = (itemId: any) => {
        if (!open.value) {
            id = itemId;
            init();
        }
        open.value = !open.value;
    };
    const pageLoading = ref();
    const helpArticle = ref(new HelpArticle());
    const init = async () => {
        if (id) {
            pageLoading.value = true;
            try {
                let res = await helpArticleManageService.detail(id);
                let data = res.data.result.data || {};
                helpArticle.value = data;
            } finally {
                pageLoading.value = false;
            }
        }
    };

    const getContainer = () => {
        return document.querySelector(".help-article-page");
    };

    defineExpose({ toggleOpen });
</script>

<style lang="scss" scoped src="./HelpArticleManageDetail.scss"></style>
